<!-- 群公告 -->
<template>
  <div>
    <el-dialog
      title="群公告"
      :visible.sync="noticeVisible"
      width="30%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
    >
      <div>
        <el-input
          v-model="noticeData"
          type="textarea"
          :rows="5"
          placeholder="请输入群公告"
          size="normal"
          show-word-limit
          maxlength="70"
          clearable
        ></el-input>
      </div>
      <template #footer>
        <span>
          <el-button size="small" @click="close">取消</el-button>
          <el-button size="small" type="primary" @click="handleSubmit"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { updateSingleGroup } from "@/api/user"
import { mapGetters, mapState } from "vuex"
export default {
  name: "noticeDialog",
  data() {
    return {
      noticeVisible: false,
      noticeData: this.currentGroupNotice
    }
  },
  computed: {
    ...mapGetters(["currentGroupNotice"]),
    ...mapState(["currentChatInfo"])
  },

  mounted() {
    this.noticeData = this.currentGroupNotice
  },

  methods: {
    async handleSubmit() {
      const res = await updateSingleGroup({
        id: this.currentChatInfo.receiverId,
        notice: this.noticeData
      })
      if (res) {
        this.$message.success("操作成功")
        this.$store.dispatch("getGroupList")
        this.close()
      }
    },
    close() {
      this.noticeVisible = false
      this.noticeData = ""
    },

    open() {
      this.noticeVisible = true
      this.noticeData = this.currentGroupNotice
    }
  },
  watch: {
    currentGroupNotice(val) {
      this.noticeData = val
    }
  }
}
</script>
<style lang="less" scoped></style>
